<template>
	<view class="main">
		<view class="subject">
			<text class="type" v-if="!quest.answer_c">判断题</text>
			<text class="type" v-if="quest.answer_c && quest.right_answer.length==1">选择题</text>
			<text class="type" v-if="quest.answer_c && quest.right_answer.length>1">多选题</text>
			<text v-html="subjectContent"></text>
		</view>
		<view class="images" v-if="quest.questions_image">
			<image class="img" :src="quest.questions_image" mode="widthFix"></image>
		</view>
		<view class="answer">
			<view class="item" :class="correct.indexOf('A')>-1?'true':error.indexOf('A')>-1?'false':''"
				@click="handleAnswer('A')">
				<text class="round" v-if="error.indexOf('A')>-1"><u-icon name="close" color="#fff"
						size="28"></u-icon></text>
				<text class="round" :class="multipleAnswer.indexOf('A')>-1?'selected':''" v-else>A</text>
				<text class="answer-text">{{quest.answer_a}}</text>
			</view>
			<view class="item" :class="correct.indexOf('B')>-1?'true':error.indexOf('B')>-1?'false':''"
				@click="handleAnswer('B')">
				<text class="round" v-if="error.indexOf('B')>-1"><u-icon name="close" color="#fff"
						size="28"></u-icon></text>
				<text class="round" :class="multipleAnswer.indexOf('B')>-1?'selected':''" v-else>B</text><text
					class="answer-text"> {{quest.answer_b}}</text>
			</view>
			<view class="item" :class="correct.indexOf('C')>-1?'true':error.indexOf('C')>-1?'false':''"
				v-if="quest.answer_c" @click="handleAnswer('C')">
				<text class="round" v-if="error.indexOf('C')>-1"><u-icon name="close" color="#fff"
						size="28"></u-icon></text>
				<text class="round" :class="multipleAnswer.indexOf('C')>-1?'selected':''" v-else>C</text><text
					class="answer-text">{{quest.answer_c}}</text>
			</view>
			<view class="item" :class="correct.indexOf('D')>-1?'true':error.indexOf('D')>-1?'false':''"
				v-if="quest.answer_d" @click="handleAnswer('D')">
				<text class="round" v-if="error.indexOf('D')>-1"><u-icon name="close" color="#fff"
						size="28"></u-icon></text>
				<text class="round" :class="multipleAnswer.indexOf('D')>-1?'selected':''" v-else>D</text><text
					class="answer-text">{{quest.answer_d}}</text>
			</view>

		</view>
		<view class="other">
			<view class="item" @click="skill">
				<u-icon color="#646464" name="zhihu-circle-fill"></u-icon>技巧
			</view>
			<!-- <view class="item">
				<u-icon color="#646464" name="volume-fill"></u-icon> 语音
			</view>
			<view class="item">
				<u-icon color="#646464" name="play-circle-fill"></u-icon>视频
			</view> -->
		</view>
		<view class="skill" v-if="(!isTrue || skillShow) && quest.tech">
			技巧：
			{{quest.tech}}
		</view>

		<view class="detail" v-if="!isTrue || skillShow">
			<view class="line">
				<view class="left"></view> 试题详解 <view class="left"></view>
			</view>
			<view class="standard">
				标准答案：{{explain}}
			</view>
		</view>
		<view class="confirm" @click="multiple" v-if="quest.right_answer.length>1">
			提交
		</view>
		<view class="bottom">
			<view class="item" @click="prevSubject">
				<u-icon name="arrow-left"></u-icon>上一题
			</view>
			<view class="number" style="color: #4365C6;">
				<text class="round"> <u-icon name="checkmark"></u-icon></text>{{rightNum}}
			</view>
			<view class="number" style="color:#9A2925">
				<text class="round"> <u-icon name="close"></u-icon></text>{{errorNum}}
			</view>
			<view class="item" @click="linkPractice">
				<u-icon color="#3584FA" name="grid"></u-icon>{{thisNum}}/{{count}}
			</view>
			<view class="item" @click="nextSubject">
				下一题 <u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<u-popup v-model="showNum" mode="bottom" @close="close" :closeable="true" style="overflow: auto;">
			<view class="popup-box">
				<scroll-view style="height:100%;height: 500rpx;" scroll-y @touchmove.stop
					:scroll-into-view="scrollIntoViewMenu">
					<view class="content-number">
						<view @click="getSortSubject(index)" class="item-number" v-for="(item,index) in countArray"
							:class="item.resoult===true?'active':item.resoult===false?'error':''" :key="index">
							{{index+1}}
						</view>
					</view>
				</scroll-view>
			</view>



		</u-popup>
	</view>
</template>

<script>
	import {
		orderPractice,
		answerApi,
		nextSubjectApi,
		prevSubjectApi,
		rightOrError,
		deleteRecord,
		sortSubject
	} from "@/api/index.js"
	export default {
		data() {
			return {
				scrollIntoViewMenu: '',
				countArray: [],
				showNum: false,
				rightNum: 0,
				errorNum: 0,
				count: 0,
				class: '',
				skillShow: false,
				quest: {
					right_answer: ''
				},
				subjectType: '',
				isTrue: true,
				explain: '',
				isAnswer: true,
				correct: '',
				error: '',
				thisNum: 1,
				multipleAnswer: '',
				resource: '',
				is_restart: '2',
				vip: '0',
				classKey: 'class',
				subjectContent: '',
				userInfo: '',
				record: '',
				clssIfyIndex: ''
			};
		},
		filters: {
			removeSpaces(str) {
				if (str) {
					return str.replace(/\s/g, '');
				} else {
					return str
				}

			}
		},
		onLoad(option) {
			this.class = option.class
			this.subjectType = option.subjectType
			this.resource = option.resource
			this.vip = option.vip
			this.clssIfyIndex = option.index
			if (this.vip == 1) {
				this.classKey = 'b_class'
			}
		},
		mounted() {
			this.userInfo = uni.getStorageSync("userInfo")
			this.getSubject()

		},
		methods: {
			close() {
				this.showNum = false
				// console.log('close');
			},
			//跳转
			linkPractice() {
				this.showNum = true
			},
			//重新开始
			restart() {
				let params = {
					subject: this.subjectType,
					vip: this.userInfo.vip
				}
				deleteRecord(params).then(res => {
					if (res.code == 1) {
						uni.removeStorageSync('numberArray' + this.clssIfyIndex)
						this.is_restart = '1'
						this.getSubject()
					}

				})
			},
			//显示技巧
			skill() {
				this.subjectContent = this.quest.questions.replace(this.quest.red_text,
					"<span style='color: red;font-weight:600;font-size:34rpx'>" + this.quest.red_text +
					"</span>");
				this.skillShow = true
			},
			//获取对错的数量
			getRightErrorNum() {
				rightOrError({
					subject: '1'
				}).then(res => {
					this.errorNum = res.data.error_count
					this.rightNum = res.data.right_count
				})
			},
			//多选提交
			multiple() {
				this.getAnswer(this.multipleAnswer)
			},
			//点击答案
			handleAnswer(answer) {
				let numberArray = uni.getStorageSync('numberArray' + this.clssIfyIndex)
				console.log('this.record', numberArray)
				if (numberArray.includes(this.thisNum)) {
					return
				}
				//多选题
				if (this.quest.right_answer.length > 1) {
					if (this.multipleAnswer.indexOf(answer) > -1) {
						this.multipleAnswer = this.multipleAnswer.replace(new RegExp(answer, 'g'), '')
					} else {
						this.multipleAnswer += answer
					}
				} else {
					this.getAnswer(answer)
				}
				console.log(this.multipleAnswer)
			},
			//判断底部渲染题目数量
			topicNum(answer, resoult) {
				let numberArray = uni.getStorageSync('numberArray' + this.clssIfyIndex)
				if (!numberArray) {
					numberArray = []
				}
				if (answer) {
					let obj = {
						value: this.thisNum,
						found: true,
						answer,
						resoult
					}
					numberArray.push(obj)
					uni.setStorageSync('numberArray' + this.clssIfyIndex, numberArray)
				}
				let bSet = new Set(numberArray);
				// 遍历a数组，并在找到的元素上添加'found'属性（但注意这会破坏数组的原始结构）
				for (let i = 0; i < numberArray.length; i++) {
					for (let j = 0; j < this.countArray.length; j++) {
						if (numberArray[i].value == this.countArray[j]) {
							this.countArray[j] = {
								value: this.countArray[j],
								found: true,
								answer: numberArray[i].answer,
								resoult: numberArray[i].resoult
							}
							break
						}
					}
				}

				console.log('this.countArray', this.countArray)
			},
			//答题
			getAnswer(answer) {

				if (this.record) {
					return
				}
				let data = {
					exam_id: '',
					question_id: this.quest.id,
					answer: answer.split('').join(','),
					source: this.resource
				}
				this.correct = this.quest.right_answer

				answerApi(data).then(res => {
					this.getRightErrorNum()
					if (res.code == 1) {
						this.isTrue = true
						this.topicNum(answer, true)
						setTimeout(() => {
							this.nextSubject()
						}, 1000)
					} else {
						if (this.quest.right_answer.length > 1) {
							for (let i in this.multipleAnswer) {
								if (this.correct.indexOf(this.multipleAnswer[i]) == -1) {
									this.error += this.multipleAnswer[i]
								}
							}
						} else {
							this.error = answer
						}
						this.topicNum(answer, false)
						this.isTrue = false
					}
				})
			},
			//自动填充答案
			automatic() {
				if (this.record) {
					this.correct = this.quest.right_answer
					if (this.record.your_answer == this.quest.right_answer) {
						this.isTrue = true

					} else {
						if (this.quest.right_answer.length > 1) {
							for (let i in this.multipleAnswer) {
								if (this.correct.indexOf(this.multipleAnswer[i]) == -1) {
									this.error += this.multipleAnswer[i]
								}
							}
						} else {
							this.error = this.record.your_answer
						}

						this.isTrue = false
					}
				}

			},
			//下一题
			nextSubject() {
				let that = this
				this.skillShow = false
				this.error = ''
				this.correct = ''
				this.multipleAnswer = ''
				this.isTrue = true
				this.record = ''
				let params = {
					subject: this.subjectType,
					vip: this.vip,
					now_question_id: this.quest.id,
					[this.classKey]: this.class
				}
				nextSubjectApi(params).then(res => {
					if (res.code == 0) {
						if (res.data && res.data.length == 0) {
							wx.showModal({
								title: '',
								cancelText: '返回',
								confirmText: '查看错题',
								content: `本次练习全部做完？`,
								success(res) {
									if (res.confirm) {
										uni.redirectTo({
											url: "/pages/subject/errorLook?isVip=" + that.vip
										})
										// that.restart()
									} else if (res.cancel) {
										uni.navigateBack(-1)
									}
								}
							})
						}
					} else {
						this.record = res.data.record
						this.quest = res.data.question
						this.subjectContent = this.quest.questions
						this.explain = res.data.question.explain
						this.thisNum = res.data.sort

						this.automatic()
					}

				})
			},
			//上一题
			prevSubject() {

				if (this.thisNum == 1) {
					uni.showToast({
						title: '已经是第一题了',
						icon: 'none'
					})
					return
				}
				this.skillShow = false
				this.error = ''
				this.correct = ''
				this.multipleAnswer = ''
				this.isTrue = true
				this.record = ''
				let params = {
					subject: this.subjectType,
					vip: '0',
					now_question_id: this.quest.id,
					[this.classKey]: this.class
				}
				prevSubjectApi(params).then(res => {
					this.record = res.data.record
					this.quest = res.data.question
					this.quest.right_answer = this.quest.right_answer.replace(/\s/g, '')
					this.subjectContent = this.quest.questions
					this.explain = res.data.question.explain
					this.thisNum = res.data.sort
					this.automatic()

				})
			},
			//根据序号获取题目
			getSortSubject(index) {
				let that = this
				this.skillShow = false
				this.error = ''
				this.correct = ''
				this.multipleAnswer = ''
				this.isTrue = true
				this.record = ''
				let params = {
					subject: this.subjectType,
					vip: this.vip,
					sort: index + 1,
					[this.classKey]: this.class
				}
				sortSubject(params).then(res => {
					if (res.code == 0) {} else {
						this.showNum = false
						this.record = res.data.record
						this.quest = res.data.question
						this.quest.right_answer = this.quest.right_answer.replace(/\s/g, '')
						this.subjectContent = this.quest.questions
						this.explain = res.data.question.explain
						this.thisNum = res.data.sort
						this.automatic()
					}

				})
			},
			//获取题目
			getSubject() {
				let that = this
				this.record = ''
				let params = {
					subject: this.subjectType,
					vip: this.vip,
					[this.classKey]: this.class,
					is_restart: this.is_restart,

				}
				orderPractice(params).then(res => {
					if (res.code == 1) {
						this.record = res.data.record
						this.quest = res.data.question
						this.quest.right_answer.replace(/\s/g, '')
						this.subjectContent = this.quest.questions
						this.explain = res.data.question.explain
						this.thisNum = res.data.sort

						this.count = JSON.parse(res.data.count)
						this.countArray = Array.from({
							length: parseInt(this.count)
						}, (_, i) => i + 1)

						if (res.data.sort == 1) {
							uni.removeStorageSync('numberArray' + this.clssIfyIndex)
						}
						let numberArray = uni.getStorageSync('numberArray' + this.clssIfyIndex)
						if (res.data.sort > 1 && !numberArray) {
							that.is_restart = '1'
							that.restart()
						}
						that.skillShow = false
						that.topicNum()
						that.automatic()
						if (res.data.sort > 1 && numberArray) {
							wx.showModal({
								title: '',
								cancelText: '重新开始',
								confirmText: '继续练习',
								content: `上次做到第${res.data.sort}题，是否继续？`,
								success(res) {
									if (res.confirm) {

									} else if (res.cancel) {
										console.log('用户点击取消')
										that.is_restart = '1'
										that.restart()


									}
								}
							})
						}

					} else if (res.code == 0) {
						if (res.data && res.data.length == 0) {
							that.is_restart = 1
							that.getSubject()
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.main {
		position: relative;
	}

	.content-number {
		padding: 40rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding-top: 8 0rpx;
		max-height: 500rpx;
		overflow: auto;
		-webkit-overflow-scrolling: touch;


		.item-number {
			width: 80rpx;
			height: 80rpx;
			margin-right: 30rpx;
			margin-bottom: 20rpx;
			border-radius: 100%;
			font-size: 24rpx;
			border: 1px solid #4394ED;
			text-align: center;
			line-height: 80rpx;
		}

		.active {
			background-color: #597CD6;
			color: #fff;
		}

		.error {
			background-color: #F3CA9E;
			border-color: #CB5B4D;
		}

		.item-number:nth-child(6n) {
			margin-right: 0;
		}
	}

	.popup-box {
		width: 100%;
		height: 500rpx;
		padding: 20rpx 0;
	}

	.main {
		background-color: #f2f2f2;
		padding: 26rpx;
		padding-bottom: 150rpx;

		.confirm {
			font-size: 28rpx;
			color: #fff;
			background-color: #4394ED;
			position: absolute;
			right: 40rpx;
			bottom: 20%;
			border-radius: 100%;
			width: 100rpx;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
		}

		.subject {
			font-size: 34rpx;
			color: #666;
			line-height: 50rpx;

			.type {
				color: #597CD6;
				border: 1px solid #597CD6;
				font-size: 34rpx;
				border-radius: 10rpx;
				padding: 2rpx 10rpx;
				margin-right: 10rpx;
			}
		}

		.images {
			margin-top: 40rpx;
			text-align: center;
			width: 100%;

			.img {
				max-width: 80%;
			}
		}

		.detail {
			margin-top: 40rpx;

			.line {
				display: flex;
				font-size: 28rpx;
				color: #C6362E;
				align-items: center;

				.left {
					border-bottom: 1px dotted #C6362E;
					height: 1px;
					flex: 1;
				}
			}

			.standard {
				color: #5F5F5F;
				font-size: 32rpx;
				margin-top: 20rpx;
			}
		}

		.answer {

			font-size: 30rpx;
			color: #000;

			.item {
				margin-top: 40rpx;
				display: flex;
				flex-wrap: wrap;

				.round {
					width: 50rpx;
					height: 50rpx;
					border-radius: 100%;
					border: 1px solid #333;
					display: block;
					text-align: center;
					line-height: 45rpx;
					margin-right: 10rpx;
					font-size: 30rpx;
				}

				.answer-text {
					flex: 1;
					font-size: 34rpx;
				}

				.selected {
					background-color: #333;
					color: #fff;
				}
			}

			.true {
				.round {
					background-color: #4394ED;
					color: #fff;
					border: 1px solid #4394ED;
				}
			}

			.false {
				.round {
					background-color: #D22E25;
					color: #fff;
					border: 1px solid #D22E25;
				}
			}
		}

		.other {
			display: flex;
			align-items: center;
			margin-top: 40rpx;

			.item {
				margin-right: 20rpx;
				color: #646464;
				padding: 10rpx 20rpx;
				border-radius: 10rpx;
				border: 1px solid #646464;
				display: flex;
				align-items: center;
			}
		}

		.skill {
			margin-top: 40rpx;
			color: #333;
			line-height: 40rpx;
			font-size: 32rpx;
		}

		.bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #fff;
			display: flex;
			align-items: center;
			width: 100%;
			padding: 20rpx 10rpx;
			color: #5A5A5A;
			max-width: 500px;

			.item {
				flex: 1;
				display: flex;
				align-items: center;
			}

			.number {
				flex: 1;
				display: flex;
				align-items: center;

				.round {
					border: 1px solid #ccc;
					padding: 0 6rpx;
					margin-right: 4rpx;
				}
			}
		}
	}

	@media (min-width:500px) {
		.main {
			.bottom {
				margin-left: -250px;
				left: 50%;

			}
		}

	}
</style>